<template>
    <div class="container" @click="clickHandle('test click', $event)">

        <button open-type="getUserInfo" @getuserinfo="bindGetUserInfo" class="userinfo">
            <!--<img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover"/>
            <div class="userinfo-nickname">
                <card :text="userInfo.nickName"></card>
            </div>-->
            用户授权
        </button>

        <div class="usermotto">
            <div class="user-motto">
                <card :text="motto"></card>
            </div>
        </div>

        <form class="form-container">
            <input type="text" class="form-control" v-model="motto" placeholder="v-model"/>
            <input type="text" class="form-control" v-model.lazy="motto" placeholder="v-model.lazy"/>
        </form>
    </div>
</template>

<script>
    import card from "@/components/card";

    export default {
        data() {
            return {
                motto: "1Hello World wenChengBin",
                userInfo: {}
            }
        },

        components: {
            card
        },

        methods: {
            bindViewTap() {
                const url = "../main/main";
                wx.navigateTo({ url });
            },
            getUserInfo() {
                var _this = this;
                console.log(3);
                // 调用登录接口
                wx.getSetting({
                    success: function(res){
                        if (res.authSetting['scope.userInfo']) {
                            wx.getUserInfo({
                                success: function(res) {
                                    _this.userInfo = res.userInfo;
                                    console.log(res.userInfo);
                                    //用户已经授权过
                                    console.log('用户已经授权过');
                                    _this.bindViewTap();

                                }
                            })
                        }else{
                            console.log('用户还未授权过')
                        }
                    }
                })
            },
            bindGetUserInfo(e) {
                var _this = this;
                console.log(e);
                // console.log(e.mp.detail.rawData)
                if (e.mp.detail.rawData) {
                    //用户按了允许授权按钮
                    console.log("用户按了允许授权按钮");
                    _this.bindViewTap();
                } else {
                    //用户按了拒绝按钮
                    console.log("用户按了拒绝按钮");
                }
            },
            clickHandle(msg, ev) {
                console.log("clickHandle:", msg, ev);
            }
        },

        created() {
            // 调用应用实例的方法获取全局数据
            this.getUserInfo();
        }
    };
</script>

<style scoped>
    .userinfo {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .userinfo-avatar {
        width: 128 rpx;
        height: 128 rpx;
        margin: 20 rpx;
        border-radius: 50%;
    }

    .userinfo-nickname {
        color: #aaa;
    }

    .usermotto {
        margin-top: 150px;
    }

    .form-control {
        display: block;
        padding: 0 12px;
        margin-bottom: 5px;
        border: 1px solid #ccc;
    }

</style>
